require('../../assets/css/index.less');
require('../../assets/css/basic.less');
// 小图标
require('../../assets/fonts/iconfont.css');
require('../../assets/font/iconfont.css');
// 当前页面样式
require('./course.less');
// 工具函数 utils
const dom = require('../../utils/dom');
const https = require('../../utils/https');
const local = require('../../utils/local');
dom.ready(function() {
    dom.creatfoot('sport')
    dom.addEvent(".sport-run", "click", function() {
        location.href = "./sport.html"
    });
    dom.addEvent(".sport-ride", "click", function() {
        location.href = "./ride.html"
    });
    dom.addEvent(".sport-course", "click", function() {
        location.href = "./course.html"
    });
    dom.addEvent(".sellCourse", "click", function() {
        location.href = "./courseint.html"
    });


    // 渲染
    https.get("/api/train/courseList", function(res) {
        var { errno, data } = res;
        if (errno == 0) {
            console.log(data);
            var sellCou = data.filter(v =>
                v.courseId == 1
            );
            render1(".course", sellCou);

            var couList = data.filter(v =>
                v.courseId > 1
            );
            render2(".courList", couList);

        }
    });

    //封装渲染
    function render1(obj, box) {
        box.map(v =>
            dom.getEle(obj).innerHTML += `
            <li>
            <a href="./courseint.html?id=${v.courseId}">
            <div class="course-top">
                <img src="http://fitness.h5.itsource.cn:3701${v.imgurl}" alt="">
            </div>
            <div class="course-bu">
                <h4 class="fs16">${v.name}</h4>
                <p class="fs12">${v.desc}</p>
            </div>
            </a>
        </li>
            `
        )
    };

    function render2(obj, box) {
        box.map(v =>
            dom.getEle(obj).innerHTML += `
            <li class="">
        <a href="./courseint.html?id=${v.courseId}">
        <img src="http://fitness.h5.itsource.cn:3701${v.imgurl}" alt="">
        <div>
            <h4 class="fs20">${v.name}</h4>
            <p class="fs14">${v.desc}</p>
        </div>
        </a>  
                </li>
            `
        )
    };

})